<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动停靠菜单效果</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.sideMenu{
			width: 50px;
			height: 100px;
			background-color:#FF79BC;
			position:fixed;
			right:-50px;
			top:50%;
			margin-top:-50px;
		}

		.sideMenu .trigger{
			width: 20px;
			height: 20px;
			background-color: #46A3FF;
			position: absolute;
			top:50%;
			margin-top:-10px;
			left:-20px;
			cursor: pointer;
		}
	

	</style>
<!-- 	 <script src = "../biaodan exercise/jquery-1.12.0.js"></script>
	 <script>
		$(document).ready(function() {
        
            var $sideMenu = $('.sideMenu');
            $('.trigger')
                .on('mouseenter', function() { //
                    $sideMenu.stop().animate({right: 0}, 500);//(stop是指停止在animate动画执行前的所有动画)
                })
                .parent()//(指大的div sideMenu)
                .on('mouseleave', function() { //
                    $sideMenu.stop().animate({right: '-50px'}, 500);
                });

             });    
             //(mouseenter当鼠标穿过元素时，发生的事件，和mouseover事件不同，只有当鼠标穿过被选元素时才会触发)
               (mouseleave当鼠标离开元素时，只有在鼠标指针离开被选元素时，才会触发)
	</script> -->
</head>
<body>
	 <div class="sideMenu">
		 <div class="trigger"></div>
	 </div>
  
	    <script src = "../biaodan exercise/jquery-1.12.0.js"></script>
	    <script>
	    	!function(window,document,$,undefined){
                $('.trigger').on('click',function (){
                	var $sideMenu = $('.sideMenu');
                		// $sideMenu.toggleClass('right0')
                		//有right：0的时候
                		if($sideMenu.hasClass('right0')){
                            $sideMenu.animate({right: -50}, 500).removeClass('right0')
                            $('.trigger').css('background-color','#46A3FF')
                          
                		}else { //(没有right：0的时候)
                            $sideMenu.animate({right: 0}, 500).addClass('right0')
                            $('.trigger').css('background-color','#F9F900')
 
                		}
                })
	    	}(window,document,jQuery)
	    </script>
</body>
</html>